urs

useRefState

🔥 React hook for maintaining correct values, in a clean way, without updates on unmounted components

Features

• TypeScript support
• Zero dependencies
• React Native support
• Keep your state consistant within your callback functions

Installation

yarn add urs      or     npm i -S urs

Usage

import useRefState from 'urs'
import { useState } from 'react'

const App = () => {
  const [loading, setLoading] = useRefState(false)
  const [loadingReact, setLoadingReact] = useState(false)
  
  // DO NOT destructure like this
  const [{ current }] = useRefState()
  
  const onClick = () => {
    setLoading(true)
    setLoadingReact(true)
    console.log('loading.current', loading.current) // gives us `true`
    console.log('loadingReact', loadingReact) // gives us `false`
  }

  return (
    <button onClick={handleClick}>Click Me!</button>
  )
}

Options

The 2nd argument of useRefState determines if you want to be able to update state when a component is unmounted. If true it will block setState on unmounted components. Useful for the common error cannot update state on unmounted component.

const [state, setState] = useRefState('same as useState default state', true)